.PTZ-container {
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: max-content; // 300px / 16px
  position: relative;
  color: #bbc4d2;

  .PTZ-control-circle {
    width: 12.5em; // 200px / 16px
    height: 12.5em; // 200px / 16px
    border-radius: 6.25em; // 100px / 16px
    background: rgb(221 221 221 / 0.1);

    .PTZ-control {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      width: 12.5em; // 200px / 16px
      height: 12.5em; // 200px / 16px
      border-radius: 6.25em; // 100px / 16px
      /* transform: rotate(45deg); */

      .control-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 5.9375em; // 95px / 16px
        height: 5.9375em; // 95px / 16px
        border-top-left-radius: 5.9375em; // 95px / 16px
        border: 0.0625em solid #fff; // 1px / 16px
        background-color: #edf0f7;
        cursor: pointer;

        &:hover {
          background-color: aliceblue;
        }
        .control-icon {
          transform: rotate(45deg);
          color: #1e90ff;
        }
      }
    }
  }

  .control-round {
    width: 6.875em; // 110px / 16px
    height: 6.875em; // 110px / 16px
    border-radius: 3.4375em; // 55px / 16px
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;

    .PTZ-control {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      width: 6.875em; // 110px / 16px
      height: 6.875em; // 110px / 16px
      border-radius: 3.4375em; // 55px / 16px
      transform: rotate(45deg);

      .control-btn {
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3.4375em; // 55px / 16px
        height: 3.4375em; // 55px / 16px
        border-top-left-radius: 3.4375em; // 55px / 16px
        border: 0.0625em solid rgba(204, 204, 204, 0.5); // 1px / 16px
        background-color: #fff;
        cursor: pointer;
        &:hover {
          background-color: aliceblue;
        }
        .control-icon {
          transform: rotate(45deg);
          color: #1e90ff;
        }
      }
    }
  }
}

.PTZ-container-2 {
  display: flex;

  & > *:not(:last-child) {
    margin-right: 2.25em; // 36 / 16
  }

  .handle-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.875em; // 110 / 16
    height: 2.1875em; // 35 / 16
    border-radius: 3.75em; // 60 / 16
    background: linear-gradient(180deg, #d4dbe8 0%, #ffffff 99%);
    box-sizing: border-box;
    box-shadow: 0 0.125em 0.1875em 0 #ebecf2; // 2 / 16, 3 / 16
    position: relative;

    & > div {
      flex: 1;
      height: 100%;
      border-radius: 3.75em; // 60 / 16
      cursor: pointer;
      color: #a8b4cc;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover,
      &:global(.select) {
        color: #727886;
        box-shadow: 1px 1px 5px black;
      }
    }

    .isControlSelect {
      color: #727886;
    }
  }

  &:global(.column) {
    flex-direction: column;

    & > *:not(:last-child) {
      margin-right: 0; // 36 / 16
      margin-bottom: 2.25em;
    }

    .handle-btn {
      flex-direction: column;
      width: 2.1875em; // 110 / 16
      height: 6.875em; // 35 / 16
    }
  }
}
